<template>
  <div>
    <el-breadcrumb v-for="item in classification" :key="item" separator=">">
      <el-breadcrumb-item :to="{ path: '/all' }">全部商品</el-breadcrumb-item>
      <el-breadcrumb-item>{{ item.first }}</el-breadcrumb-item>
      <el-breadcrumb-item>{{ item.second }}</el-breadcrumb-item>
    </el-breadcrumb>

    <h4>分类</h4>

    <el-tabs class="types" type="card">
      <el-cascader
        v-model="value"
        :options="options"
        :show-all-levels="false"
        @change="handleChange"
      ></el-cascader>
    </el-tabs>

    <el-container class="container">
      <!-- 全部商品 -->
      <el-row class="form2">
        <el-col :class="index" v-for="(goods, index) in All_goods" :key="index">
          <a href="javascript:void(0);" @click="search(goods)" id="one">
            <img :src="src + goods.details.image" alt="" />
            <h2 class="name">{{ goods.name }}</h2>
            <h3 class="describe">{{ goods.msg }}</h3>
            <p class="money">
              <el-link type="warning"
                >{{ goods.specifications[0].price }}
              </el-link>
            </p>
          </a>
        </el-col>
      </el-row>
    </el-container>
  </div>
</template>
<script>
import { getlistMerchandise } from "../api/product.js";

export default {
  data() {
    return {
      value: [],
      options: [
        {
          value: "电子产品",
          label: "电子产品",
          children: [{ value: "手机", label: "手机" }],
        },
        {
          value: "服饰",
          label: "服饰",
          children: [{ value: "小群几", label: "小群几" }],
        },
      ],
      classification: [],
      All_goods: [],
      pager: {
        //每页显示条目个数
        pageSize: 10000,
        currentPage: 1,
        totalSize: 0,
      },
      src: "http://localhost:5000" + "/files/picPath?picUrl=",
    };
  },
  methods: {
    handleChange(value) {
      this.classification = [];
      var arr = {
        first: value[0],
        second: value[1],
      };
      this.classification.push(arr);
    },
    //拉取所有商品数据
    fetchData() {
      getlistMerchandise(this.pager)
        .then((res) => {
          this.All_goods = res.data.data;
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    search(goods) {
      console.log(goods.id);
      this.$router.push("/particulars?id=" + goods.id);
    },
  },
  mounted() {
    this.fetchData();
  },
};
</script>

<style>
.el-breadcrumb {
  margin-top: 25px;
  margin-left: 119px;
}
.types {
  margin-top: 1px;
  margin-left: 110px;
  height: 41.5px;
}
.el-cascader .el-input {
  width: 120px !important;
  margin: 0px !important;
}
h4 {
  width: 50px;
  float: left;
  margin-top: 24px;
  margin-left: 116px;
}
.el-row {
  background-color: rgba(241, 238, 238, 0.596) !important;
}
#one {
  border: none;
}
.type {
  font-size: 25px;
  margin-left: 110px;
  color: rgba(5, 13, 90, 0.616);
}
.container {
  display: block;
}
.form2 {
  margin-top: 20px;
  padding-left: 100px;
}
.form2 img {
  width: 210px !important;
  border: none !important;
}
.form2 :hover {
  border: 0.9px solid #868484;
}
.el-col {
  width: 220px !important;
  height: 320px;
  margin-left: 13px;
  margin-top: 10px;
}
.el-tabs--card > .el-tabs__header {
  border-bottom: none;
}
.name {
  font-size: 16px;
  border: none !important;
}
.name,
.describe {
  font-weight: 400;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  border: none !important;
}
.describe {
  margin: 5px 10px;
  height: 18px;
  font-size: 12px;
  color: #b0b0b0;
  border: none !important;
}
.money {
  margin: 10px 10px 10px;
  text-align: center;
  border: none !important;
}
.money a {
  border: none !important;
}
.money .el-link {
  font-size: 20px;
}
.money a :hover {
  border: none !important;
}
.el-checkbox__input.is-checked + .el-checkbox__label {
  color: black;
}
</style>
